import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, Button} from '@tarojs/components'
import './details.scss'
import request from '../utils/request'
import {guaranteeModes} from '../../config/index'
import {getBankImgUrl} from '../../config/getImgs'

export default class Details extends Component {

  config = {
    navigationBarTitleText: '产品详情'
  }

  state = {
    data: null
  }

  componentWillMount() {
    let id = this.$router.params.id
    request.get('/loudi-poc/product/' + id).then((res) => {
      let {data} = res.data;
      this.setState({
        data
      })
    })
  }

  apply() {
    let productId = this.$router.params.id;
    let customerId = Taro.getStorageSync('currentCustomer').id;
    if(customerId === undefined) customerId = 1;
    request.get('/loudi-poc/demand/',{'product-id': productId, 'customer-id': customerId} ).then((res) => {
      if(res.statusCode === 200) {
        Taro.navigateTo({
          url: './applySuccess'
        })
      }
    })
  }

  convert(lower, upper) {
    return Math.round(lower / 10000) + '万-' + Math.round(upper/10000) + '万';
  }

  render() {
    let data = this.state.data
    return (
      <View className='container'>
        <View className='header'>
          <View className='header-content'>
            <View className='bank'>
              {data && <Image className='bankImg' src={getBankImgUrl(data.logoCode)} />}
            </View>
            <View className='section'>
              <View className='title'>
                <View className='name'>{data.productName}</View>
                <View className='credit'>{guaranteeModes[data.guaranteeMode]}</View>
              </View>
              <View className='desc'>发布机构：{data.instName}</View>
            </View>
          </View>
          <View className='percents'>
            <View className='item'>
              <View className='title'>贷款额度</View>
              <View className='result'>{data && this.convert(data.loanLower, data.loanUpper)}</View>
            </View>
            <View className='item'>
              <View className='title'>参考利率</View>
              <View className='result'>{data.loanRateLower}%-{data.loanRateUpper}%</View>
            </View>
            <View className='item'>
              <View className='title'>贷款期限</View>
              <View className='result'>{data.loanTermLower}-{data.loanTermUpper}个月</View>
            </View>
          </View>
        </View>
        <View className='content'>
          <View className='content_item'>
            <View className='title'>
              <Image className='logo' src={require('../../images/product/logo1.png')} />
              <Text className='name'>产品简介</Text>
            </View>
            <Text className='desc'>{data.introduction}</Text>
          </View>
          <View className='content_item'>
            <View className='title'>
              <Image className='logo' src={require('../../images/product/logo2.png')} />
              <Text className='name'>产品特点</Text>
            </View>
            <Text className='desc'>{data && data.feature.split('$').join('\n')}</Text>
          </View>
          <View className='content_item'>
            <View className='title'>
              <Image className='logo' src={require('../../images/product/logo3.png')} />
              <Text className='name'>适用客户</Text>
            </View>
            <Text className='desc'>{data.applicableCustomer}</Text>
          </View>
          <View className='content_item'>
            <View className='title'>
              <Image className='logo' src={require('../../images/product/logo4.png')} />
              <Text className='name'>申请条件</Text>
            </View>
            <Text className='desc'>{data && data.applyCondition.split('$').join('\n')}</Text>
          </View>
        </View>
        <Button className='footer' onClick={this.apply}>立即申请</Button>
      </View>
    )
  }
}
